<template>
  <div id="main"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
     props:{
          sendOption:{
              type:Object,
              required:true
          }
      },
     watch:{
         sendOption:{
             deep:true,
             handler(){
                  this.play_echarts();
             }
         }
     },
   methods:{
       play_echarts(){
                    let option = {
            title: {
                text: this.sendOption.title
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:  this.sendOption.legend
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data:this.sendOption.xData
            },
            yAxis: {
                type: 'value'
            },
            series: this.sendOption.series
            };
            // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
 // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
       }
   }

};
</script>

<style lang="less" scoped></style>
